import React from 'react';
import style from './style.styl';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 
import {StepTab,StepItem} from '../../../../ui-components';

import SelfProject from './SelfProject';
import SelfQuestion from './SelfQuestion';
import SelfInvited from './SelfInvited';
import SelfCheck from './SelfCheck';
import ReviewHeader from '../tool/ReviewHeader';

@connect(({ app, review }) => ({ app, review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class SelfIndex extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'SelfIndex';
  }
  componentDidMount() {
    const {
      itemId
    } = this.props.routeParams;
    this.props.actions.fetchReviewItem(itemId, 'activities'); 
    this.props.actions.fetchReviewItemInvitations(itemId,'activities');
  }
  componentWillReceiveProps(nextProps) {
    const {
      reviewItem,
    } = nextProps.review;
    const {
      activityId,
      activityDisplayType,
    } = reviewItem;
    if(~[3,5].indexOf(activityDisplayType))
      this.context.router.replace(`/review/report/${activityId}`);
  }
  componentWillUnmount() {
    this.props.actions.clearReviewItem(); 
  }
  goBack = () => {
    const {
      reviewItem,
    } = this.props.review;
    this.context.router.push(`/review/index/${(reviewItem.reviewTemplate||{}).templateId}`);
  }
  render() {
    const {
      step = 1,
    } = this.props.location.query;
    const {
      reviewItem,
      reviewItemProjects,
      reviewItemInvitations,
    } = this.props.review;
    const {
      itemId
    } = this.props.routeParams;
    return (
      <div>
        <ReviewHeader title={reviewItem.revieweeUserProfile ? `${reviewItem.revieweeUserProfile.fullName}的自评` : ''} goBack={this.goBack}  />
        <StepTab step={step} url={this.props.location}>
          <StepItem title={'按项目自评'} name={'ScrollTitle'}>
            <SelfProject activityId={reviewItem.activityId} projects={reviewItemProjects || []} />
          </StepItem>
          <StepItem title={'回答通用问题'} name={'ScrollTitle'}>
            <SelfQuestion activityId={reviewItem.activityId} question={reviewItem.questions || []} />
          </StepItem>
          <StepItem title={'邀请同事撰写反馈'} name={'ScrollTitle'}>
            <SelfInvited activityId={reviewItem.activityId} itemId={itemId} invitedUsers={reviewItemInvitations} />
          </StepItem>
          <StepItem title={'确认并提交'} name={'ScrollTitle'} className={style['detail-stepItem']}>
            <SelfCheck 
              itemId={itemId}
              templateId={(reviewItem.reviewTemplate||{}).templateId}
              isSubmittable={reviewItem.isSubmittable}
              activityId={reviewItem.activityId} 
              projects={reviewItemProjects || []}
              question={reviewItem.questions || []}
              invitedUsers={reviewItemInvitations}
            />
          </StepItem>
        </StepTab>
      </div>
    );
  }
}

export default SelfIndex;
